/* ========== FONT ========== */
/* ========== COLORS ========== */
/* ========== COLORS BG ========== */
/* ========== SHADOW ========== */
/* ========== TRANSITION ========== */
/* =========================
 * GENERAL
 * ========================= */
button.krg,
.krg.button {
  width: 100%;
  margin: 6px 0px;
  padding: 8px 10px;
  border-radius: 5px;
  outline: none;
  font-size: small;
  text-align: center;
}
/* =========================
 * PRIMARY
 * ========================= */
button.krg.primary,
.krg.button.primary {
  background: #5790db;
  color: #fff;
  border: solid #5790db 2px;
  float: right;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}
button.krg.primary:hover,
.krg.button.primary:hover {
  background: #1d4e8d;
  border-color: #1d4e8d;
}
button.krg.primary:active,
.krg.button.primary:active {
  background: #0f305c;
  border-color: #0f305c;
}
/* =========================
 * SECONDARY
 * ========================= */
button.krg.secondary,
.krg.button.secondary {
  background: #9b828c;
  color: #fff;
  border: solid #9b828c 2px;
  float: right;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}
button.krg.secondary:hover,
.krg.button.secondary:hover {
  background: #7a5c68;
  border-color: #4e353e;
}
/* =========================
 * ROUND
 * ========================= */
.krg.round-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #5790db;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
@media only screen and (min-width: 768px) {
  button.krg.primary,
  button.krg.secondary,
  button.krg.accept,
  .krg.button {
    width: auto;
    min-width: 160px;
    padding: 6px 10px;
  }
}
/* =========================
 * PAGEHEADER
 * ========================= */
button {
  background: 0;
  border: 0;
  outline: pointer;
}
button:hover {
  background: #f5f5f5;
  border: 0;
  outline: none;
}
button:active,
button:focus {
  outline: 0;
  border: none;
  background: #eee;
}
div.card,
li.card {
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  padding: 10px;
}
li.card {
  list-style-type: none;
}
/* #########################
 * FONTS
 * ######################### */
/* ========== COLOR ========== */
/* =========================
 * HEADLINES
 * ========================= */
h1 {
  color: #222;
  font-family: font-family-text;
  margin: 20px 0px 20px 0px;
  padding: 0;
  font-size: 40px;
  font-weight: 100;
}
h2 {
  color: #222;
  font-family: "font-family-title";
  margin: 10px 0px 10px 0px;
  padding: 0;
  font-size: x-large;
}
/* =========================
 * ARTICLEHEADLINES
 * ========================= */
/*
 span.krg.headline {
    color: @color-headline-foreground;
    font-family: font-family-text;
    margin: 10 0 10 0;
    padding: 0;
    font-size: xx-large;
}

p.krg.preview {
    color: @color-preview-foreground;
    font-family: "font-family-title";
    line-height: 140%;
    font-size:medium;
}*/
div.krg.sectiontitle {
  width: auto;
  text-align: center;
  border-width: 1 0 1 0;
  border-color: #000;
  border-style: solid;
  padding: 5 0 5 0;
  margin: 10px 0px 10px 0px;
}
div.krg.sectiontitle > span {
  font-weight: 400;
  font-family: font-family-theme;
  font-size: xx-large;
}
/* =========================
 * LINKS
 * ========================= */
a {
  color: inherit;
  text-decoration: none;
  padding: 0;
  margin: 0;
}
a:hover {
  text-decoration: none;
}
a.link,
a.krg.link {
  padding: 0;
  color: #4d75aa;
}
td.krg.link {
  color: #4d75aa;
}
a.clickable:hover,
a.krg.clickable:hover,
span.krg.clickable:hover,
h1.krg.clickable:hover,
h2.krg.clickable:hover,
h3.krg.clickable:hover,
h4.krg.clickable:hover,
h5.krg.clickable:hover,
h6.krg.clickable:hover,
td.krg.clickable:hover {
  cursor: pointer;
  text-decoration: underline;
}
/* =========================
 * PARAGRAPH
 * ========================= */
p {
  color: #333;
  font-family: font-family-text;
  margin: 20px 0px 20px 0px;
  padding: 0;
  font-size: medium;
  line-height: 170%;
}
p span.bigletter {
  font-family: font-family-theme;
  font-weight: bold;
  margin: 16px 6px 0px 0px;
  font-size: 50px;
  float: left;
}
p.articleabout {
  color: #555;
  font-family: "font-family-title";
  font-size: 1.4em;
  line-height: 140%;
}
i.link:hover {
  text-decoration: underline;
  cursor: pointer;
}
.small-info {
  font-size: 13px;
}
.info-detail {
  color: #999;
}
/* #########################
 * FORM
 * ######################### */
/* ========== COLOR ========== */
div.krg-form {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}
div.krg-form input[type=text],
div.krg-form input[type=color],
div.krg-form input[type=password],
div.krg-form textarea,
div.krg-form select {
  margin-bottom: 1px;
  border-color: #aab3bd;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-radius: 2px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  background: #fff;
  outline: none;
  font-size: large;
  padding: 2px 8px;
}
div.krg-form input[type=text]:focus,
div.krg-form input[type=color]:focus,
div.krg-form input[type=password]:focus,
div.krg-form select:focus {
  margin-bottom: 0px;
  border-color: #5790db;
  border-width: 0px 0px 2px 0px;
}
div.krg-form textarea:focus {
  margin-bottom: 1px;
  border-color: #5790db;
  border-width: 0px 0px 2px 0px;
}
div.krg-form input[type=checkbox] {
  border-color: solid #aab3bd 1px;
  border-radius: 2px;
  background: #fff;
}
/* =========================
 * ROW
 * ========================= */
.form-row {
  width: 100%;
  border-color: #ddd;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  padding: 8px 0px;
}
.krg-form label {
  color: #555;
  font-size: medium;
  font-weight: 400;
  vertical-align: middle;
  font-weight: 100;
}
/* =========================
 * ITEMS
 * ========================= */
div.form-items-row {
  width: 100%;
  border-color: #ddd;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  padding: 8px 0px;
}
div.form-items-row .label {
  font-size: small;
  width: 100%;
}
div.form-items-row div.input {
  width: 100%;
  overflow: hidden;
}
div.form-items-row div.input .item {
  border-color: #aab3bd;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-radius: 2px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  background: #fff;
  width: 100px;
  min-height: 120px;
  position: relative;
  float: left;
  margin: 10px;
  margin-left: 0px;
}
div.form-items-row div.input .item .option {
  position: absolute;
  bottom: 10px;
}
/* =========================
 * Textbox
 * ========================= */
div.form-text-row {
  width: 100%;
  border-color: #ddd;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  padding: 8px 0px;
}
div.form-text-row div.label label,
div.form-text-row div.input label {
  font-size: small;
}
div.form-text-row div.label input[type=text],
div.form-text-row div.input input[type=text],
div.form-text-row div.label input[type=color],
div.form-text-row div.input input[type=color],
div.form-text-row div.label input[type=password],
div.form-text-row div.input input[type=password],
div.form-text-row div.label select,
div.form-text-row div.input select {
  width: 100%;
}
/* =========================
 * PRIMARY
 * ========================= */
div.form-cb-row {
  width: 100%;
  border-color: #ddd;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  padding: 8px 0px;
  display: table;
}
div.form-cb-row div.label {
  width: 140px;
}
div.form-cb-row div.label label {
  font-size: medium;
  vertical-align: middle;
}
div.form-cb-row div.input {
  margin-left: 10px;
  width: 100%;
  display: table-cell;
}
div.form-cb-row div.input input[type=checkbox] {
  width: auto;
  float: right;
  margin-right: 10px;
  vertical-align: middle;
}
/* =========================
 * TEXTAREA
 * ========================= */
div.form-textarea-row {
  width: 100%;
  border-color: #ddd;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  padding: 8px 0px;
}
div.form-textarea-row div.label label,
div.form-textarea-row div.input label,
div.form-textarea-row select label {
  font-size: small;
}
div.form-textarea-row div.label textarea,
div.form-textarea-row div.input textarea,
div.form-textarea-row select textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  font-size: medium;
}
@media only screen and (min-width: 768px) {
  div.krg-form h1,
  div.krg-form h2,
  div.krg-form h3,
  div.krg-form h4 {
    margin-left: 0px;
  }
  div.form-text-row {
    display: table;
  }
  div.form-text-row div.label {
    width: 140px;
  }
  div.form-text-row div.label label {
    font-size: medium;
  }
  div.form-text-row div.input {
    width: 100%;
    display: table-cell;
  }
  div.form-text-row div.input input {
    width: 100%;
  }
  div.form-cb-row div.input input[type=checkbox] {
    float: left;
    margin-left: 0px;
  }
  div.form-textarea-row div.input {
    margin-left: 0px;
    width: 100%;
  }
}
div.krg.infobox {
  width: 100%;
  padding: 0px;
  margin: 30px 0px;
  border-radius: 5px;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
}
div.krg.infobox p {
  padding: 10px 16px;
  margin: 0px;
  font-family: font-family-title;
}
div.krg.infobox.info {
  background-color: #d1e2fa;
  border-color: #4482d4;
}
div.krg.infobox.info p {
  color: #4482d4;
}
div.krg.infobox.success {
  background-color: #b2e4ae;
  border-color: #418f3c;
}
div.krg.infobox.success p {
  color: #418f3c;
}
div.krg.infobox.error {
  background-color: #f9dfdf;
  border-color: #bb3636;
}
div.krg.infobox.error p {
  color: #bb3636;
}
div.krg.infobox.warning {
  background-color: #fceac9;
  border-color: #be8315;
}
div.krg.infobox.warning p {
  color: #be8315;
}
ul.krg {
  padding: 0;
}
ul.krg > li {
  padding: 8px;
}
ul.krg.card {
  width: 100%;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  border-spacing: 0px;
}
ul.krg.card > li {
  border-bottom: 1px solid #222;
}
ul.krg.packed-infos {
  width: 100%;
  list-style-type: none;
}
ul.krg.packed-infos :first-child {
  padding: 0px 0px 10px 0px;
}
ul.krg.packed-infos > li {
  border-bottom: 1px solid #ddd;
  padding: 20px 0px 10px 0px;
}
ul.krg.items-with-icon {
  list-style-type: none;
}
ul.krg.items-with-icon li {
  width: auto;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-color: #222;
  padding: 10px 0px 10px 0px;
}
ul.krg.items-with-icon li div.item-icon {
  float: left;
  width: 40px;
  height: 40px;
  text-align: center;
}
ul.krg.items-with-icon li div.item-content {
  margin-left: 50px;
}
ul.krg.items-with-icon li div.item-content span.name {
  font-weight: bold;
  color: #333;
}
ul.krg.items-with-icon li div.item-content span.description {
  color: #555;
}
ul.krg.infobar {
  width: auto;
  margin: 10 0 10 0;
  padding: 0px;
}
ul.krg.infobar > li {
  font-family: "font-family-title";
  color: #555;
  white-space: nowrap;
  display: inline;
  margin-right: 30px;
  font-size: small;
}
/* #########################
 * PAGEINDEXER
 * ######################### */
/* ========== COLOR ========== */
div.krg.pageindexer {
  text-align: center;
  width: 100%;
  overflow: auto;
  scroll-direction: horizontal;
}
div.krg.pageindexer ul {
  padding: 0px;
  white-space: nowrap;
  margin: 10 0 10 0;
  list-style-type: none;
}
div.krg.pageindexer ul li {
  font-family: "font-family-title";
  color: #4d75aa;
  padding: 4px 8px;
  white-space: nowrap;
  display: inline;
}
div.krg.pageindexer ul li:hover {
  background: #f5f5f5;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.krg.profileimageupload-wrapper {
  position: relative;
}
.krg.profileimageupload-wrapper img {
  width: 180px;
  height: 180px;
  background-color: #aaa;
  object-fit: cover;
}
.krg.profileimageupload-wrapper input {
  width: 0px;
  height: 0px;
  overflow: hidden;
}
.krg.profileimageupload-wrapper label {
  position: absolute;
  left: 160px;
  top: 20px;
  background-image: url('../../../img/ico/imageupload-white.svg');
}
/* #########################
 * SIDEBAR
 * ######################### */
/* ========== COLOR ========== */
ul.krg.sidebar {
  width: auto;
  margin-bottom: 40px;
  padding: 0;
  list-style-type: none;
}
ul.krg.sidebar li {
  width: auto;
  padding: 8px 20px;
  font-family: "font-family-title";
}
ul.krg.sidebar li.active {
  border-width: 0px 4px 0px 0px;
  border-color: #000;
  border-style: solid;
}
ul.krg.sidebar li:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}
/* #########################
 * STRUCTURE
 * ######################### */
/* ========== COLOR ========== */
.c-fullscreen {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.c-blur-animation {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s ease-out;
}
.c-blur-animation-active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.1s ease-out;
}
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overscroll-behavior: none;
}
div.krg-wrapper {
  width: 100%;
  min-height: 100vh;
  position: relative;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  padding-bottom: 60px;
  overflow: hidden;
}
.krg.hide {
  opacity: 0;
  transition: opacity 0.1s ease-out;
}
.krg.transition {
  transition: opacity 0.1s ease-out;
}
.krg.contentarea {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto 0 auto;
}
.textarea {
  width: auto;
  margin-left: 10px;
  margin-right: 10px;
}
.touch-btn {
  margin: 10px;
  width: 20px;
  margin: 0;
  padding: 0;
  border-width: 0;
  background-color: transparent;
  outline: none;
}
div.krg.blur-layer {
  position: fixed;
  z-index: 450;
  background: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s ease-out;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
div.krg.blur-layer.active {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.1s ease-out;
}
.krg.pagebanner {
  width: 100%;
  height: 40px;
  margin-top: 40px;
  overflow: hidden;
  z-index: 100;
  background-color: #fff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}
.krg.pagebanner .contentarea {
  text-align: center;
}
.krg.pagebanner .contentarea span {
  line-height: 40px;
  letter-spacing: 1px;
  color: #333;
  font-family: font-family-theme;
  font-weight: 400;
  font-size: x-large;
}
.krg.pagebanner .contentarea button.leftbtn {
  left: 0;
  top: 0;
  height: 100%;
  width: 40px;
  padding: 0;
  margin: 0;
  display: block;
  overflow: hidden;
  position: absolute;
}
.krg.pagebanner .contentarea button.rightbtn {
  right: 0;
  top: 0;
  height: 100%;
  width: 40px;
  padding: 0;
  margin: 0;
  display: block;
  overflow: hidden;
  position: absolute;
}
/* =========================
 * STATIC -> INDEXPAGE
 * ========================= */
.krg.indexbanner {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: url("/img/loginbanner.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.krg.indexbanner:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to bottom right, #68b8ee, #5c0a0a);
  opacity: 0.6;
}
.indexslogan {
  position: absolute;
  overflow: auto;
  top: 200px;
  left: 0px;
  right: 0px;
  bottom: 20px;
  width: 100%;
  height: 100%;
}
.indexslogan li {
  margin-right: 10px;
  font-family: font-family-theme, "Times New Roman", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #fff;
  font-size: x-large;
  text-align: right;
  list-style-type: none;
}
@keyframes caret {
  50% {
    border-color: transparent;
  }
}
/* =========================
 * STATIC -> LOGIN
 * ========================= */
.loginbox {
  margin: 10px;
  background-color: #f5f5f5;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  padding: 0px 10px 10px 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}
.loginbox-gardient {
  width: auto;
  margin: 0px -10px;
  height: 8px;
  background: linear-gradient(to right, #68b8ee, #5c0a0a);
}
div.card {
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  padding: 10px;
}
div.subbox2 {
  margin: 20px 0px;
  border-radius: 5px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
div.subbox2 .head {
  background: #fff;
  padding: 8px;
  border: solid 0px #000;
  border-width: 0px 0px 1px 0px;
  display: grid;
  grid-template-columns: 40px auto;
}
div.subbox2 .head .menu {
  grid-column: 1;
}
div.subbox2 .head .title {
  grid-column: 2;
  font-weight: bold;
}
div.subbox2 .head h3 {
  margin: 0px;
}
div.subbox2 .body {
  background: #fafafa;
  padding: 10px;
}
div.subbox {
  overflow: hidden;
  margin: 20px 0px;
}
div.subbox > div.head {
  width: auto;
  display: grid;
  grid-template-columns: auto 40px;
}
div.subbox > div.head > div.menu {
  border-radius: 2px 2px 0px 2px;
  background-color: #5790db;
  height: 100%;
  grid-column: 2;
  text-align: center;
}
div.subbox > div.head > div.title {
  grid-column: 1;
}
div.subbox > div.body {
  padding: 10px;
  overflow: hidden;
  border-style: solid;
  border-width: 0px 4px 0px 0px;
  border-color: #5790db;
}
div.subbox > div.body.closed {
  height: 0px;
  margin: 0;
}
/* ========== MEDIA QUERIES ========== */
/*@media only screen and (min-width: 320px) {
  .krg > .sidebar-active {
    width: 300px;
    display: block;
    z-index: 500;
  }
  .krg > .active {
    display: block;
  }
}*/
@media only screen and (min-width: 768px) {
  .krg.ilu-banner-wrapper .krg.illustration {
    width: 220px;
    height: auto;
    max-height: 180px;
    float: left;
  }
  .krg.ilu-banner-wrapper .krg.content {
    margin-left: 230px;
    width: auto;
    padding: 10px;
  }
  .indexslogan {
    top: 180px;
  }
  .indexslogan span {
    font-size: x-large;
  }
  .contentarea {
    max-width: 600px;
  }
  .textarea {
    width: 100%;
    margin: 0;
  }
  .article {
    padding: 10 0 20 0;
  }
}
table.krg {
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-spacing: 0px;
}
table.krg > thead > tr > th,
table.krg > thead > tr > td {
  margin: 0;
  text-align: left;
  padding: 8px;
  border-bottom: 2px solid #222;
}
table.krg tr > th,
table.krg tr > td {
  margin: 0;
  padding: 8px;
  border-bottom: 1px solid #333;
}
table.krg tbody > tr > td.clickable,
table.krg > tr > td.clickable {
  color: #4d75aa;
}
table.krg.clickable tbody > tr > td,
table.krg.clickable > tr > td {
  color: #4d75aa;
}
table.krg.hoverables tbody > tr:hover {
  background: #f5f5f5;
}
table.krg.first-td-highlight tr > td:first-child {
  color: #4d75aa;
}
table.krg.first-td-highlight tr > td:nth-child(2) {
  font-style: italic;
}
table.krg.card {
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  background: #fff;
  border-spacing: 0px;
}
table.krg.card > thead {
  background: #f5f5f5;
}
table.krg.card > thead > tr > th,
table.krg.card > thead > tr > td {
  color: #333;
  border-bottom: 2px solid #222;
}
table.krg.card tr > th,
table.krg.card tr > td {
  color: #333;
  border-bottom: 1px solid #333;
}
table.krg.card tr:first-child > td:first-child {
  padding-left: 10px;
}
ul.krg.packed-infos li p {
  margin: 5px 0px;
}
.td.title {
  font-size: 20px;
  font-weight: 600;
}
.td.undertitle {
  font-size: 17px;
  color: #999;
}
.td.underline {
  border-width: 0px 0px 2px 0px;
  border-style: solid;
  border-color: #000;
  border-color: #4d75aa;
}
h2.td.underline,
h3.td.underline {
  padding-bottom: 5px;
  margin-bottom: 20px;
}
/* #########################
 * TOPBAR
 * ######################### */
/* ========== COLOR ========== */
div.krg.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
}
div.krg.topbar .head {
  height: 40px;
  width: 100%;
  background-color: #000;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
div.krg.topbar .head .contentarea {
  height: 100%;
  position: relative;
}
div.krg.topbar .head .contentarea button.menu {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 40px;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-width: 0;
  background-color: transparent;
  outline: none;
}
div.krg.topbar .head .contentarea div.logo {
  position: absolute;
  left: 50;
  top: 0;
  right: auto;
  display: inline;
}
div.krg.topbar .head .contentarea div.logo span {
  position: absolute;
  left: 50;
  height: 100%;
  color: #fff;
  font-family: font-family-theme;
  font-size: 22px;
  vertical-align: middle;
  line-height: 40px;
}
li.krg.clickable:hover {
  cursor: pointer;
}
/* =========================
 * TOPBAR -> MENU
 * ========================= */
ul.krg.topbar-menu-list {
  display: none;
  position: absolute;
  right: 0px;
  list-style-type: none;
  height: 100%;
  margin: 0px;
}
ul.krg.topbar-menu-list > li,
ul.krg.topbar-menu-list > a > li {
  float: left;
  height: 40px;
  padding: 0 10px;
  font-size: small;
  color: #fff;
  font-family: "font-family-title";
  font-weight: 100;
  letter-spacing: 1px;
}
ul.krg.topbar-menu-list > li > a,
ul.krg.topbar-menu-list > a > li > a,
ul.krg.topbar-menu-list > li > span,
ul.krg.topbar-menu-list > a > li > span {
  margin: 10px;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
}
ul.krg.topbar-menu-list > li:hover,
ul.krg.topbar-menu-list > a > li:hover {
  background: #fff;
}
ul.krg.topbar-menu-list > li:hover a,
ul.krg.topbar-menu-list > a > li:hover a,
ul.krg.topbar-menu-list > li:hover span,
ul.krg.topbar-menu-list > a > li:hover span {
  color: #333;
}
li.krg.dropdown-wrapper {
  position: relative;
}
li.krg.dropdown-wrapper div.krg.dropdown-content {
  display: none;
}
li.krg.dropdown-wrapper:hover div.krg.dropdown-content {
  display: block;
}
/* =========================
 * TOPBAR -> MENU -> SUBMENU
 * ========================= */
div.krg.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  background-color: #fff;
  color: #333;
  font-size: small;
  width: auto;
}
div.krg.dropdown-content ul {
  margin: 0;
}
@media only screen and (min-width: 768px) {
  div.krg.topbar .head .contentarea button.menu {
    display: none;
  }
  div.krg.topbar .head .contentarea div.logo {
    left: 0;
    background-color: red;
  }
  div.krg.topbar .head .contentarea ul.krg.topbar-menu-list {
    display: block;
  }
}
dl.krg.grid {
  display: grid;
  grid-template-columns: 110px auto;
}
dl.krg.grid dt {
  font-weight: bold;
}
dl.krg.grid dd {
  margin: 0;
  padding-left: 5px;
  margin-bottom: 6px;
}
.krg.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height: 20px;
  padding: 4px 0px;
  background: #dcdcdc;
}
.krg.footer a {
  font-size: small;
  color: #777;
  margin-left: 10px;
  float: right;
}
/* ========== COLOR ========== */
ul.krg.snippet-list {
  list-style-type: none;
  padding: 0;
}
div.krg.snippet-wrapper {
  border-color: #000;
  border-width: 0px 0px 2px 0px;
  border-style: solid;
  overflow: hidden;
  background: #fff;
  margin: 30px 0px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  padding: 10px;
  border-radius: 2px;
  transition: opacity 0.2s ease-out;
}
div.krg.snippet-wrapper > div.krg.img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 0px 0px 10px 0px;
  background-color: #aaa;
  transition: opacity 0.2s ease-out;
}
div.krg.snippet-wrapper span.krg.headline {
  color: #222;
  font-family: font-family-text;
  margin: 10 0 10 0;
  padding: 0;
  font-size: xx-large;
}
div.krg.snippet-wrapper ul.krg.infobar {
  width: 100%;
  margin: 10px 0px;
}
div.krg.snippet-wrapper ul.krg.infobar li {
  font-family: font-family-title;
  color: #333;
  white-space: nowrap;
  display: inline;
  margin-right: 30px;
  font-size: small;
}
div.krg.snippet-wrapper ul.krg.infobar li div.krg.authorimage {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  vertical-align: middle;
  display: inline-block;
  margin: 0px 4px;
  background-color: #aaa;
  background-size: cover;
  transition: opacity 0.2s ease-out;
}
div.krg.snippet-wrapper span.krg.category {
  font-size: small;
  margin: 5px 0px;
  display: block;
}
div.krg.snippet-wrapper p.krg.preview {
  color: #777;
  font-family: "font-family-title";
  line-height: 140%;
  font-size: medium;
  margin: 10px 0px;
}
div.krg.snippet-wrapper > ul {
  margin: 0px;
}
/* =========================
 * LAYOUT
 * ========================= */
div.krg.snippet-wrapper.layout-big div.krg.img {
  width: auto;
  height: 200px;
}
div.krg.snippet-wrapper.layout-big div.krg.text {
  width: auto;
}
div.krg.snippet-wrapper.layout-big div.krg.text span.krg.headline {
  font-size: xx-large;
}
div.krg.snippet-wrapper.layout-medium div.krg.img {
  display: block;
  width: auto;
  height: 120px;
}
div.krg.snippet-wrapper.layout-medium div.krg.text {
  width: auto;
}
div.krg.snippet-wrapper.layout-medium div.krg.text span.krg.headline {
  font-size: xx-large;
}
div.krg.snippet-wrapper.layout-onlytext div.krg.img {
  display: none;
}
div.krg.snippet-wrapper.layout-onlytext div.krg.text {
  width: auto;
}
div.krg.snippet-wrapper.layout-onlytext div.krg.text span.krg.headline {
  font-size: x-large;
}
div.krg.snippet-wrapper.layout-small div.krg.img {
  display: none;
}
div.krg.snippet-wrapper.layout-small div.krg.text {
  width: auto;
}
div.krg.snippet-wrapper.layout-small div.krg.text p {
  display: none;
}
div.krg.snippet-wrapper.layout-small div.krg.text span.krg.headline {
  font-size: x-large;
}
@media only screen and (min-width: 500px) {
  /* =========================
     * LAYOUT
     * ========================= */
  div.krg.snippet-wrapper.layout-big div.krg.img {
    height: 240px;
  }
  div.krg.snippet-wrapper.layout-medium div.krg.img {
    width: 180px;
    height: 180px;
    background-color: red;
    margin: 0px 10px 0px 0px;
    float: left;
  }
  div.krg.snippet-wrapper.layout-medium div.krg.text {
    width: auto;
  }
}
div.krg.bannerselector-wrapper div.preview {
  position: relative;
}
div.krg.bannerselector-wrapper div.preview div.bannerpreview,
div.krg.bannerselector-wrapper div.preview img.bannerpreview {
  width: 100%;
  height: 130px;
  background-color: #ddd;
}
div.krg.bannerselector-wrapper div.preview img.bannerpreview {
  object-fit: cover;
  display: none;
}
div.krg.bannerselector-wrapper div.preview input.imageinput {
  width: 0px;
  height: 0px;
  overflow: hidden;
  display: none;
}
div.krg.bannerselector-wrapper div.preview label {
  position: absolute;
  right: 20px;
  top: 105px;
  background-image: url('../../../krg/ico/imageupload-white.svg');
  display: none;
}
div.krg.bannerselector-wrapper div.preview.imagemode div.bannerpreview {
  display: none;
}
div.krg.bannerselector-wrapper div.preview.imagemode img.bannerpreview,
div.krg.bannerselector-wrapper div.preview.imagemode input.imageinput,
div.krg.bannerselector-wrapper div.preview.imagemode label {
  display: block;
}
.krg.codeblock-wrapper {
  display: grid;
  overflow: hidden;
  box-shadow: 0px 0px 2px rgba(24, 11, 11, 0.4);
  grid-template-columns: 50px auto;
  border: #000 solid 0px;
  border-radius: 5px;
}
.krg.codeblock-wrapper .krg.codeblock-language {
  grid-column: 1;
  grid-row: 1;
  border-bottom: #000 solid 2px;
  padding: 6px;
  font-weight: bold;
  text-align: right;
}
.krg.codeblock-wrapper .krg.codeblock-language.js {
  background: yellow;
  color: #000;
}
.krg.codeblock-wrapper .krg.codeblock-language.html {
  background: red;
  color: #fff;
}
.krg.codeblock-wrapper .krg.codeblock-language.css {
  background: #3c1679;
  color: #fff;
}
.krg.codeblock-wrapper .krg.codeblock-header {
  grid-column: 2;
  grid-row: 1;
  padding: 6px;
  background: #eee;
  border-bottom: #000 solid 2px;
  font-style: italic;
}
.krg.codeblock-wrapper .krg.codeblock-linenumbers {
  grid-column: 1;
  grid-row: 2;
  padding: 8px 10px;
  color: #555;
  background: #eee;
  text-align: right;
  font-family: consolas;
  font-size: 14px;
}
.krg.codeblock-wrapper .krg.codeblock-code {
  grid-column: 2;
  grid-row: 2;
  min-width: 300px;
  padding: 8px 12px;
  overflow-x: scroll;
  background: #fff;
  color: #000;
  font-family: consolas;
  font-size: 14px;
}
div.collabsiblebox {
  margin: 20px 0px;
  overflow: hidden;
}
div.collabsiblebox > .head {
  padding: 8px;
  display: grid;
  grid-template-columns: 40px auto;
}
div.collabsiblebox > .head > .menu {
  grid-column: 1;
}
div.collabsiblebox > .head > .menu > div {
  transition: all 0.2s;
  width: min-content;
  transform: rotate(90deg);
}
div.collabsiblebox > .head > .menu > div i {
  margin-right: 0px;
}
div.collabsiblebox > .head > .title {
  grid-column: 2;
}
div.collabsiblebox > .body {
  padding: 10px;
  max-height: 1000px;
  overflow: hidden;
}
div.collabsiblebox.closed > .body {
  padding: 0px 10px;
  max-height: 0px;
}
div.collabsiblebox {
  border-radius: 5px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}
div.collabsiblebox > .head {
  background: #fff;
  border: solid 0px #000;
  border-width: 0px 0px 2px 0px;
}
div.collabsiblebox > .body {
  opacity: 1;
  transition: all 0.2s;
  background: #fafafa;
}
div.collabsiblebox.closed > .body {
  opacity: 0;
  transition: all 0.2s;
}
div.collabsiblebox.closed > .head > .menu > div {
  transform: rotate(0deg);
  transition: all 0.2s;
}
ul.krg.card-list > li > .head {
  display: grid;
  grid-template-columns: 40px auto 20px;
  width: auto;
}
ul.krg.card-list > li > .head > .menu {
  grid-column: 1;
}
ul.krg.card-list > li > .head > .menu > div {
  transition: all 0.2s;
  width: min-content;
  transform: rotate(90deg);
}
ul.krg.card-list > li > .head > .menu > div i {
  margin-right: 0px;
}
ul.krg.card-list > li > .head > .title {
  grid-column: 2;
}
ul.krg.card-list > li > .head > .options {
  grid-column: 3;
}
ul.krg.card-list > li > .body {
  padding: 10px;
  max-height: 1000px;
  overflow: hidden;
}
ul.krg.card-list > li.closed > .body {
  padding: 0px 10px;
  max-height: 0px;
}
ul.krg.card-list.clickables > li > .head {
  color: #4d75aa;
}
ul.krg.card-list.hoverables > li:hover > .head {
  background: #f5f5f5;
}
ul.krg.card-list > li {
  border: solid 0px #000;
  border-width: 0px 0px 1px 0px;
}
ul.krg.card-list > li > .head {
  background: #fff;
}
ul.krg.card-list > li > .body {
  opacity: 1;
  transition: all 0.2s;
  background: #fff;
}
ul.krg.card-list > li.closed > .body {
  opacity: 0;
  transition: all 0.2s;
}
ul.krg.card-list > li.closed > .head > .menu > div {
  transform: rotate(0deg);
  transition: all 0.2s;
}
/* #########################
 * MESSAGECROW
 * ######################### */
/* ========== COLOR ========== */
/* =========================
 * WRAPPER
 * ========================= */
div.krg.messagecrow-wrapper {
  position: fixed;
  top: -100px;
  width: 100%;
  overflow: hidden;
  z-index: 1000;
  padding-bottom: 1px;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
div.krg.messagecrow-wrapper span {
  font-size: larger;
}
div.krg.messagecrow-wrapper p {
  margin: 10px 0px 10px 0px;
}
div.krg.messagecrow-wrapper .krg.actions {
  width: 100%;
  margin-top: 10px;
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn {
  height: 32px;
  width: 110px;
  padding: 6px;
  margin: 0;
  border-radius: 0px;
  color: #fff;
  float: right;
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn i.krg.btn-cache {
  background-image: url('/krg/ico/cache-white.svg');
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn i.krg.btn-cancel {
  background-image: url('/krg/ico/cancel-white.svg');
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn i.krg.btn-close {
  background-image: url('/krg/ico/close-white.svg');
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn i.krg.btn-ok {
  background-image: url('/krg/ico/ok-white.svg');
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn:hover {
  background-color: #fff;
  color: #333;
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn:hover i.krg.btn-cache {
  background-image: url('/krg/ico/cache.svg');
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn:hover i.krg.btn-cancel {
  background-image: url('/krg/ico/cancel.svg');
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn:hover i.krg.btn-close {
  background-image: url('/krg/ico/close.svg');
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn:hover i.krg.btn-ok {
  background-image: url('/krg/ico/ok.svg');
}
div.krg.messagecrow-wrapper.active {
  top: 0px;
  opacity: 1;
}
div.krg.messagecrow-blur.active {
  opacity: 1;
}
/* =========================
 * WINDOW-SETTINGS
 * ========================= */
div.krg.messagecrow-success {
  background-color: #418f3c;
  color: #418f3c;
}
div.krg.messagecrow-success p {
  color: #cde9cb;
}
div.krg.messagecrow-error {
  background-color: #bb3636;
  color: #f9dfdf;
}
div.krg.messagecrow-error p {
  color: #f9dfdf;
}
div.krg.messagecrow-warning {
  background-color: #dfa02b;
  color: #fceac9;
}
div.krg.messagecrow-warning p {
  color: #fceac9;
}
div.krg.messagecrow-info {
  background-color: #3c32bd;
  color: #d2cff8;
}
div.krg.messagecrow-info p {
  color: #d2cff8;
}
.krg.leftsidebar {
  position: fixed;
  top: 0;
  left: -300;
  z-index: 500;
  overflow: hidden;
  width: 260px;
  height: 100%;
  background-color: #fff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  transition: 0.1s;
}
.krg.leftsidebar .optionhead {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  z-index: 100;
  background: linear-gradient(135deg, #2c1377 0%, #8d3b44 100%);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0);
}
.krg.leftsidebar .optionhead > img {
  position: absolute;
  margin: 24;
  height: 30px;
}
.krg.leftsidebar .optionhead > span {
  position: absolute;
  left: 80;
  top: 20;
  height: 100%;
  color: #fff;
  font-size: large;
  font-family: font-family-theme;
  font-size: x-large;
  vertical-align: middle;
  line-height: 40px;
}
.krg.leftsidebar .options {
  position: absolute;
  top: 140px;
  bottom: 20px;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  width: 300px;
  transition: 0.1s;
}
.krg.leftsidebar .options .form-section-title {
  margin-left: 20px;
}
.krg.leftsidebar .footer {
  padding: 2px 10px;
  font-size: small;
  color: #999;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  overflow-x: hidden;
  width: 300px;
}
.krg.leftsidebar.active {
  left: 0;
  transition: 0.1s;
}
.krg.leftsidebar.full {
  left: 0;
  right: 0;
  width: 100%;
  transition: 0.1s;
}
.krg.leftsidebar span.krg.section-title {
  padding-left: 20px;
  font-size: large;
}
.krg.dotprocessbar-wrapper {
  position: relative;
}
.krg.dotprocessbar-wrapper ul {
  margin: 0px;
  padding: 10px;
  text-align: center;
}
.krg.dotprocessbar-wrapper ul li {
  display: inline-block;
  position: relative;
  text-align: center;
  width: 12px;
  height: 12px;
  border: solid 2px #999;
  border-radius: 50%;
  margin: 0px 10px 10px 10px;
}
.krg.dotprocessbar-wrapper ul li div.line {
  position: absolute;
  left: 14px;
  top: 5px;
  width: 20px;
  height: 2px;
  background-color: #999;
  overflow-x: hidden;
}
.krg.dotprocessbar-wrapper ul li.success {
  border-color: #16c45f;
  background-color: #16c45f;
  box-shadow: 0px 0px 6px rgba(22, 196, 95, 0.5);
}
.krg.dotprocessbar-wrapper ul li.success div.line {
  background-color: #16c45f;
}
.krg.dotprocessbar-wrapper ul li.active {
  border-color: #4381f2;
  box-shadow: 0px 0px 8px #4381f2;
  width: 10px;
  height: 10px;
  border: solid 3px #4381f2;
}
.krg.dotprocessbar-wrapper ul li.active div.line {
  top: 4px;
  background-color: #999;
}
.krg.dotprocessbar-wrapper ul li.fail {
  border-color: #eb6526;
  background-color: #eb6526;
  box-shadow: 0px 0px 6px rgba(196, 48, 22, 0.5);
}
.krg.dotprocessbar-wrapper ul li.fail div.line {
  background-color: #eb6526;
}
.contentcontrol-section.visible {
  opacity: 1;
  transition: all 0.1s;
}
.contentcontrol-section.visible.to-hidden {
  opacity: 0;
  transition: all 0.1s;
}
.contentcontrol-section.hidden {
  opacity: 0;
  transition: all 0.1s;
}
.contentcontrol-section.hidden.to-visible {
  opacity: 1;
  transition: all 0.1s;
}
i.krglogo {
  margin: 7px;
  height: 24px;
  width: 24px;
  background-image: url("/krg/ico/kriegar_logo.svg");
  background-size: auto 100%;
  background-repeat: no-repeat;
  position: absolute;
}
i.krgmenu {
  position: absolute;
  top: 0;
  left: 0;
  margin: 10px;
  height: 20px;
  width: 20px;
  background-image: url("/krg/ico/menu.svg");
  background-size: auto 100%;
  background-repeat: no-repeat;
}
i.krgbtn {
  margin: 10px;
  height: 20px;
  width: 20px;
  padding-left: 20px;
  background-size: auto 100%;
  background-repeat: no-repeat;
}
i.ico,
i.krg.ico {
  width: 14px;
  height: 14px;
  padding-left: 14px;
  margin-right: 6px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
i.krg.ico.size-small {
  width: 10px;
  height: 10px;
  padding-left: 10px;
  font-size: 10px;
}
i.krg.ico.medium {
  width: 20px;
  height: 20px;
  padding-left: 20px;
  font-size: 20px;
}
i.krg.ico.large {
  width: 24px;
  height: 24px;
  padding-left: 24px;
  font-size: 24px;
}
i.krg.ico.xlarge {
  width: 32px;
  height: 32px;
  padding-left: 24px;
  font-size: 24px;
}
i.krg.ico.xxlarge {
  width: 64px;
  height: 64px;
  padding-left: 64px;
  font-size: 64px;
}
i.btn {
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  padding-left: 24px;
}
i.krg.clickable:hover {
  cursor: pointer;
}
i.ico-send {
  background-image: url('/krg/ico/send.svg');
}
i.ico-article {
  background-image: url('/krg/ico/article.svg');
}
i.ico-home {
  background-image: url('/krg/ico/home.svg');
}
i.ico-login {
  background-image: url('/krg/ico/login.svg');
}
i.ico-login-white {
  background-image: url('/krg/ico/login-white.svg');
}
i.ico-edit {
  background-image: url('/krg/ico/edit.svg');
}
i.ico-edit-white {
  background-image: url('/krg/ico/edit-white.svg');
}
i.ico-stats {
  background-image: url('/krg/ico/stats.svg');
}
i.ico-search {
  background-image: url('/krg/ico/search.svg');
}
i.ico-medium {
  background-image: url('/krg/ico/medium.svg');
}
i.ico-medium-white {
  background-image: url('/krg/ico/medium-white.svg');
}
i.ico-delete {
  background-image: url('/krg/ico/delete.svg');
}
i.ico-delete-white {
  background-image: url('/krg/ico/delete-white.svg');
}
i.ico-undelete {
  background-image: url('/krg/ico/undelete.svg');
}
i.ico-notification {
  background-image: url('/krg/ico/notification.svg');
}
i.ico-profile {
  background-image: url('/krg/ico/profile.svg');
}
i.ico-refresh {
  background-image: url('/krg/ico/refresh.svg');
}
i.ico-refresh-white {
  background-image: url('/krg/ico/refresh-white.svg');
}
i.ico-add {
  background-image: url('/krg/ico/add.svg');
}
i.ico-add-white {
  background-image: url('/krg/ico/add-white.svg');
}
i.ico-back {
  background-image: url('/krg/ico/back.svg');
}
i.ico-pin {
  background-image: url('/krg/ico/pin.svg');
}
i.ico-public {
  background-image: url('/krg/ico/public.svg');
}
i.ico-public-white {
  background-image: url('/krg/ico/public-white.svg');
}
i.ico-private {
  background-image: url('/krg/ico/private.svg');
}
i.ico-private-white {
  background-image: url('/krg/ico/private-white.svg');
}
i.ico-cache {
  background-image: url('/krg/ico/cache.svg');
}
i.ico-ok {
  background-image: url('/krg/ico/ok.svg');
}
i.ico-ok-white {
  background-image: url('/krg/ico/ok-white.svg');
}
i.ico-cancel {
  background-image: url('/krg/ico/cancel.svg');
}
i.ico-cancel-white {
  background-image: url('/krg/ico/cancel-white.svg');
}
i.ico-close {
  background-image: url('/krg/ico/close.svg');
}
i.ico-close-white {
  background-image: url('/krg/ico/close-white.svg');
}
i.ico-devices {
  background-image: url('/krg/ico/devices.svg');
}
i.ico-start {
  background-image: url('/krg/ico/start.svg');
}
i.ico-profiles {
  background-image: url('/krg/ico/profiles.svg');
}
i.ico-settings {
  background-image: url('/krg/ico/settings.svg');
}
i.ico-phone {
  background-image: url('/krg/ico/phone.svg');
}
i.ico-computer {
  background-image: url('/krg/ico/computer.svg');
}
i.ico-trend {
  background-image: url('/krg/ico/trend.svg');
}
i.ico-lifebelt {
  background-image: url('/krg/ico/lifebelt.svg');
}
i.ico-question {
  background-image: url('/krg/ico/question.svg');
}
i.ico-twitter {
  background-image: url('/krg/ico/twitter.svg');
}
i.ico-xing {
  background-image: url('/krg/ico/xing.svg');
}
i.ico-shield {
  background-image: url('/krg/ico/shield.svg');
}
i.ico-eye {
  background-image: url('/krg/ico/eye.svg');
}
i.ico-imageupload {
  background-image: url('/krg/ico/imageupload.svg');
}
i.ico-imageupload-white {
  background-image: url('/krg/ico/imageupload-white.svg');
}
i.ico-password {
  background-image: url('/krg/ico/password.svg');
}
i.ico-email {
  background-image: url('/krg/ico/email.svg');
}
i.ico-colors {
  background-image: url('/krg/ico/colors.svg');
}
i.ico-profilepage {
  background-image: url('/krg/ico/profilepage.svg');
}
i.ico-text {
  background-image: url('/krg/ico/text.svg');
}
i.ico-meta {
  background-image: url('/krg/ico/meta.svg');
}
i.ico-key {
  background-image: url('/krg/ico/key.svg');
}
i.ico-glasses {
  background-image: url('/krg/ico/glasses.svg');
}
i.ico-glasses-white {
  background-image: url('/krg/ico/glasses-white.svg');
}
i.ico-next {
  background-image: url('/krg/ico/next.svg');
}
i.ico-key-add {
  background-image: url('/krg/ico/key-add.svg');
}
i.ico-key-add-white {
  background-image: url('/krg/ico/key-add-white.svg');
}
i.ico-lock {
  background-image: url('/krg/ico/lock.svg');
}
i.ico-lock-open {
  background-image: url('/krg/ico/lock-open.svg');
}
i.ico-linkedin {
  background-image: url('/krg/ico/linkedin.svg');
}
i.ico-speech-bubble {
  background-image: url('/krg/ico/speech-bubble.svg');
}
i.ico-suitcase {
  background-image: url('/krg/ico/suitcase.svg');
}
i.ico-education {
  background-image: url('/krg/ico/education.svg');
}
i.ico-education-white {
  background-image: url('/krg/ico/education-white.svg');
}
i.ico-hearts {
  background-image: url('/krg/ico/hearts.svg');
}
i.ico-book {
  background-image: url('/krg/ico/book.svg');
}
i.ico-book-white {
  background-image: url('/krg/ico/book-white.svg');
}
i.ico-group {
  background-image: url('/krg/ico/group.svg');
}
i.ico-chapter {
  background-image: url('/krg/ico/chapter.svg');
}
i.ico-words {
  background-image: url('/krg/ico/words.svg');
}
i.ico-money-transfer {
  background-image: url('/krg/ico/money-transfer.svg');
}
i.ico-money-transfer-white {
  background-image: url('/krg/ico/money-transfer-white.svg');
}
i.ico-ticket {
  background-image: url('/krg/ico/ticket.svg');
}
i.ico-save {
  background-image: url('/krg/ico/save.svg');
}
i.ico-save-white {
  background-image: url('/krg/ico/save-white.svg');
}
i.ico-deck {
  background-image: url('/krg/ico/deck.svg');
}
i.ico-decks {
  background-image: url('/krg/ico/decks.svg');
}
i.ico-back-white {
  background-image: url('/krg/ico/back-white.svg');
}
/* ========== SancePro ========== */
@font-face {
  font-family: font-family-title;
  src: url('/krg/font/SourceSansPro/SourceSansPro-Light.otf');
  font-weight: 100;
}
@font-face {
  font-family: font-family-title;
  src: url('/krg/font/SourceSansPro/SourceSansPro-Regular.otf');
}
@font-face {
  font-family: font-family-title;
  src: url('/krg/font/SourceSansPro/SourceSansPro-Bold.otf');
  font-weight: bold;
}
/* ========== Buttler ========== */
@font-face {
  font-family: font-family-theme;
  src: url('/krg/font/Butler/Butler_Regular.otf');
  font-weight: 100;
}
@font-face {
  font-family: font-family-theme;
  src: url('/krg/font/Butler/Butler_Bold.otf');
  font-weight: 400;
}
@font-face {
  font-family: font-family-theme;
  src: url('/krg/font/Butler/Butler_Black.otf');
  font-weight: bold;
}
/* ========== Merri ========== */
@font-face {
  font-family: font-family-text;
  src: url('/krg/font/Merriweather/Merriweather-Regular.ttf');
}
@font-face {
  font-family: font-family-mono;
  src: url('/krg/font/iAWriter/iAWriterDuospace-Regular.otf');
}
* {
  font-family: font-family-title;
}
 /* ========== INCLUDES ========== */

/* Icons */
@import url("custom/Icons.css");
@import url("custom/Illustration.css");

/* Components */
@import url("component/TopbarMenu.css");
@import url("component/HeaderMenu.css");
@import url("component/Structure.css");

@import url("component/Button.css");
@import url("component/Font.css");
@import url("component/Table.css");
@import url("component/List.css");
@import url("component/Form.css");
@import url("component/TextDesigns.css");

@import url("component/Sidebar.css");
@import url("component/PageIndexer.css");
@import url("component/Infobox.css");


/* Elements */
@import url("component/MessageCrow.css");
@import url("component/BannerSelector.css");
@import url("component/ArticleSnippet.css");
@import url("component/ProfileImageUploader.css");

//  Frames
//@import url("../frame/Loading/Loading.css");
//@import url("../frame/Article/Article.css");
//@import url("../frame/Profile/Profile.css");
 /* ========== COLOR ========== */
ul.krg.snippet-list {
  list-style-type: none;
  padding: 0;
}
div.krg.snippet-wrapper {
  border-color: #000;
  border-width: 0px 0px 2px 0px;
  border-style: solid;
  overflow: hidden;
  background: #fff;
  margin: 30px 0px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  padding: 10px;
  border-radius: 2px;
  transition: opacity 0.2s ease-out;
}
div.krg.snippet-wrapper > div.krg.img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 0px 0px 10px 0px;
  background-color: #aaa;
  transition: opacity 0.2s ease-out;
}
div.krg.snippet-wrapper span.krg.headline {
  color: #222;
  font-family: font-family-text;
  margin: 10 0 10 0;
  padding: 0;
  font-size: xx-large;
}
div.krg.snippet-wrapper ul.krg.infobar {
  width: 100%;
  margin: 10px 0px;
}
div.krg.snippet-wrapper ul.krg.infobar li {
  font-family: font-family-title;
  color: #333;
  white-space: nowrap;
  display: inline;
  margin-right: 30px;
  font-size: small;
}
div.krg.snippet-wrapper ul.krg.infobar li div.krg.authorimage {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  vertical-align: middle;
  display: inline-block;
  margin: 0px 4px;
  background-color: #aaa;
  background-size: cover;
  transition: opacity 0.2s ease-out;
}
div.krg.snippet-wrapper span.krg.category {
  font-size: small;
  margin: 5px 0px;
  display: block;
}
div.krg.snippet-wrapper p.krg.preview {
  color: #777;
  font-family: "font-family-title";
  line-height: 140%;
  font-size: medium;
  margin: 10px 0px;
}
div.krg.snippet-wrapper > ul {
  margin: 0px;
}
/* =========================
 * LAYOUT
 * ========================= */
div.krg.snippet-wrapper.layout-big div.krg.img {
  width: auto;
  height: 200px;
}
div.krg.snippet-wrapper.layout-big div.krg.text {
  width: auto;
}
div.krg.snippet-wrapper.layout-big div.krg.text span.krg.headline {
  font-size: xx-large;
}
div.krg.snippet-wrapper.layout-medium div.krg.img {
  display: block;
  width: auto;
  height: 120px;
}
div.krg.snippet-wrapper.layout-medium div.krg.text {
  width: auto;
}
div.krg.snippet-wrapper.layout-medium div.krg.text span.krg.headline {
  font-size: xx-large;
}
div.krg.snippet-wrapper.layout-onlytext div.krg.img {
  display: none;
}
div.krg.snippet-wrapper.layout-onlytext div.krg.text {
  width: auto;
}
div.krg.snippet-wrapper.layout-onlytext div.krg.text span.krg.headline {
  font-size: x-large;
}
div.krg.snippet-wrapper.layout-small div.krg.img {
  display: none;
}
div.krg.snippet-wrapper.layout-small div.krg.text {
  width: auto;
}
div.krg.snippet-wrapper.layout-small div.krg.text p {
  display: none;
}
div.krg.snippet-wrapper.layout-small div.krg.text span.krg.headline {
  font-size: x-large;
}
@media only screen and (min-width: 500px) {
  /* =========================
     * LAYOUT
     * ========================= */
  div.krg.snippet-wrapper.layout-big div.krg.img {
    height: 240px;
  }
  div.krg.snippet-wrapper.layout-medium div.krg.img {
    width: 180px;
    height: 180px;
    background-color: red;
    margin: 0px 10px 0px 0px;
    float: left;
  }
  div.krg.snippet-wrapper.layout-medium div.krg.text {
    width: auto;
  }
}
 /* #########################
 * MESSAGECROW
 * ######################### */
/* ========== COLOR ========== */
/* =========================
 * WRAPPER
 * ========================= */
div.krg.messagecrow-wrapper {
  position: fixed;
  top: -100px;
  width: 100%;
  overflow: hidden;
  z-index: 1000;
  padding-bottom: 1px;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
div.krg.messagecrow-wrapper span {
  font-size: larger;
}
div.krg.messagecrow-wrapper p {
  margin: 10px 0px 10px 0px;
}
div.krg.messagecrow-wrapper .krg.actions {
  width: 100%;
  margin-top: 10px;
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn {
  height: 32px;
  width: 110px;
  padding: 6px;
  margin: 0;
  border-radius: 0px;
  color: #fff;
  float: right;
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn i.krg.btn-cache {
  background-image: url('/krg/ico/cache-white.svg');
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn i.krg.btn-cancel {
  background-image: url('/krg/ico/cancel-white.svg');
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn i.krg.btn-close {
  background-image: url('/krg/ico/close-white.svg');
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn i.krg.btn-ok {
  background-image: url('/krg/ico/ok-white.svg');
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn:hover {
  background-color: #fff;
  color: #333;
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn:hover i.krg.btn-cache {
  background-image: url('/krg/ico/cache.svg');
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn:hover i.krg.btn-cancel {
  background-image: url('/krg/ico/cancel.svg');
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn:hover i.krg.btn-close {
  background-image: url('/krg/ico/close.svg');
}
div.krg.messagecrow-wrapper .krg.actions .krg.messagecrow-btn:hover i.krg.btn-ok {
  background-image: url('/krg/ico/ok.svg');
}
div.krg.messagecrow-wrapper.active {
  top: 0px;
  opacity: 1;
}
div.krg.messagecrow-blur.active {
  opacity: 1;
}
/* =========================
 * WINDOW-SETTINGS
 * ========================= */
div.krg.messagecrow-success {
  background-color: #418f3c;
  color: #418f3c;
}
div.krg.messagecrow-success p {
  color: #cde9cb;
}
div.krg.messagecrow-error {
  background-color: #bb3636;
  color: #f9dfdf;
}
div.krg.messagecrow-error p {
  color: #f9dfdf;
}
div.krg.messagecrow-warning {
  background-color: #dfa02b;
  color: #fceac9;
}
div.krg.messagecrow-warning p {
  color: #fceac9;
}
div.krg.messagecrow-info {
  background-color: #3c32bd;
  color: #d2cff8;
}
div.krg.messagecrow-info p {
  color: #d2cff8;
}
 /* ========== FONT ========== */
/* ========== COLORS ========== */
/* ========== COLORS BG ========== */
/* ========== SHADOW ========== */
/* ========== TRANSITION ========== */
krg-banner-selector > div.preview {
  border-radius: 5px;
}
 ul.krg.card-list > li > .head {
  display: grid;
  grid-template-columns: 40px auto 20px;
  width: auto;
}
ul.krg.card-list > li > .head > .menu {
  grid-column: 1;
}
ul.krg.card-list > li > .head > .menu > div {
  transition: all 0.2s;
  width: min-content;
  transform: rotate(90deg);
}
ul.krg.card-list > li > .head > .menu > div i {
  margin-right: 0px;
}
ul.krg.card-list > li > .head > .title {
  grid-column: 2;
}
ul.krg.card-list > li > .head > .options {
  grid-column: 3;
}
ul.krg.card-list > li > .body {
  padding: 10px;
  max-height: 1000px;
  overflow: hidden;
}
ul.krg.card-list > li.closed > .body {
  padding: 0px 10px;
  max-height: 0px;
}
ul.krg.card-list.clickables > li > .head {
  color: #4d75aa;
}
ul.krg.card-list.hoverables > li:hover > .head {
  background: #f5f5f5;
}
ul.krg.card-list > li {
  border: solid 0px #000;
  border-width: 0px 0px 1px 0px;
}
ul.krg.card-list > li > .head {
  background: #fff;
}
ul.krg.card-list > li > .body {
  opacity: 1;
  transition: all 0.2s;
  background: #fff;
}
ul.krg.card-list > li.closed > .body {
  opacity: 0;
  transition: all 0.2s;
}
ul.krg.card-list > li.closed > .head > .menu > div {
  transform: rotate(0deg);
  transition: all 0.2s;
}
 /* ========== FONT ========== */
/* ========== COLORS ========== */
/* ========== COLORS BG ========== */
/* ========== SHADOW ========== */
/* ========== TRANSITION ========== */
/* ========== COLOR ========== */
/* ========== DESIGNS ========== */
krg-form input[type='text'],
krg-form input[type='color'],
krg-form input[type='password'],
krg-form input[type='file'],
krg-form textarea,
krg-form select {
  margin-bottom: 1px;
  border-color: #aab3bd;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-radius: 2px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  background: #fff;
  outline: none;
  font-size: large;
  width: 100%;
  padding: 2px 8px;
}
krg-form input[type='text']:focus,
krg-form input[type='color']:focus,
krg-form input[type='password']:focus,
krg-form input[type='file']:focus,
krg-form select:focus {
  margin-bottom: 0px;
  border-color: #5790db;
  border-width: 0px 0px 2px 0px;
}
krg-form textarea:focus {
  margin-bottom: 0px !important;
  border-color: #5790db;
  border-width: 0px 0px 2px 0px;
}
krg-form input[type='checkbox'] {
  border-color: solid #aab3bd 1px;
  border-radius: 2px;
  background: #fff;
}
krg-form input[type='text']:disabled,
krg-form input[type='color']:disabled,
krg-form input[type='password']:disabled,
krg-form input[type='file']:disabled,
krg-form textarea:disabled,
krg-form select:disabled {
  background: #eee;
}
krg-form krg-text-box,
krg-form krg-color-picker,
krg-form krg-image-upload,
krg-form krg-selection,
krg-form krg-password-box,
krg-form krg-check-box,
krg-form krg-text-area,
krg-form krg-phone-box,
krg-form krg-text-info-box {
  border-color: #ddd;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  padding: 8px 0px;
}
krg-form krg-text-box .lable,
krg-form krg-color-picker .lable,
krg-form krg-image-upload .lable,
krg-form krg-selection .lable,
krg-form krg-password-box .lable,
krg-form krg-check-box .lable,
krg-form krg-text-area .lable,
krg-form krg-phone-box .lable,
krg-form krg-text-info-box .lable {
  padding: 4px 0px;
  display: grid;
  grid-template-columns: auto min-content;
  color: #555;
  font-size: medium;
}
krg-form krg-text-box .lable lable,
krg-form krg-color-picker .lable lable,
krg-form krg-image-upload .lable lable,
krg-form krg-selection .lable lable,
krg-form krg-password-box .lable lable,
krg-form krg-check-box .lable lable,
krg-form krg-text-area .lable lable,
krg-form krg-phone-box .lable lable,
krg-form krg-text-info-box .lable lable {
  display: inline;
  grid-column: 1;
}
krg-form krg-text-box .lable a,
krg-form krg-color-picker .lable a,
krg-form krg-image-upload .lable a,
krg-form krg-selection .lable a,
krg-form krg-password-box .lable a,
krg-form krg-check-box .lable a,
krg-form krg-text-area .lable a,
krg-form krg-phone-box .lable a,
krg-form krg-text-info-box .lable a {
  display: inline;
  grid-column: 2;
  user-select: none;
  color: #5790db;
  text-decoration: underline;
  font-weight: bold;
  padding: 0px 6px;
}
krg-form krg-text-box .details p,
krg-form krg-color-picker .details p,
krg-form krg-image-upload .details p,
krg-form krg-selection .details p,
krg-form krg-password-box .details p,
krg-form krg-check-box .details p,
krg-form krg-text-area .details p,
krg-form krg-phone-box .details p,
krg-form krg-text-info-box .details p {
  color: #555;
  font-family: font-family-title;
  font-size: small;
  margin: 2px 0px 2px 30px;
}
krg-form krg-text-box .status,
krg-form krg-color-picker .status,
krg-form krg-image-upload .status,
krg-form krg-selection .status,
krg-form krg-password-box .status,
krg-form krg-check-box .status,
krg-form krg-text-area .status,
krg-form krg-phone-box .status,
krg-form krg-text-info-box .status {
  font-family: font-family-title;
}
krg-form krg-text-box .status p,
krg-form krg-color-picker .status p,
krg-form krg-image-upload .status p,
krg-form krg-selection .status p,
krg-form krg-password-box .status p,
krg-form krg-check-box .status p,
krg-form krg-text-area .status p,
krg-form krg-phone-box .status p,
krg-form krg-text-info-box .status p {
  color: #555;
  font-family: font-family-title;
  margin: 2px 0px 2px 0px;
}
krg-form krg-text-box .status.error > p,
krg-form krg-color-picker .status.error > p,
krg-form krg-image-upload .status.error > p,
krg-form krg-selection .status.error > p,
krg-form krg-password-box .status.error > p,
krg-form krg-check-box .status.error > p,
krg-form krg-text-area .status.error > p,
krg-form krg-phone-box .status.error > p,
krg-form krg-text-info-box .status.error > p {
  font-size: medium;
  color: red;
}
krg-form krg-text-box .status.success > p,
krg-form krg-color-picker .status.success > p,
krg-form krg-image-upload .status.success > p,
krg-form krg-selection .status.success > p,
krg-form krg-password-box .status.success > p,
krg-form krg-check-box .status.success > p,
krg-form krg-text-area .status.success > p,
krg-form krg-phone-box .status.success > p,
krg-form krg-text-info-box .status.success > p {
  font-size: medium;
  color: green;
}
krg-check-box .krg-custom-check-box {
  margin-top: 4px;
  width: 40px;
  height: 18px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #5790db;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  position: relative;
}
krg-check-box .krg-custom-check-box > div {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #5790db;
}
krg-check-box .krg-custom-check-box.checked {
  background: #5790db;
}
krg-check-box .krg-custom-check-box.checked > div {
  top: 3px;
  right: 3px;
  left: auto;
  background: #fff;
}
krg-check-box .krg-custom-check-box.disabled {
  border-color: #aab3bd;
  background: #eee;
}
krg-check-box .krg-custom-check-box.disabled > div {
  top: 3px;
  right: 14px;
  left: auto;
  background: #aab3bd;
}
krg-text-info-box > .input {
  padding: 4px 0px;
  display: grid;
  grid-template-columns: auto min-content;
}
krg-text-info-box > .input > .info {
  color: #333;
  grid-column: 1;
}
krg-text-info-box > .input > krg-button {
  background-color: red;
  grid-column: 2;
}
/* ========== STRUCTURE ========== */
krg-text-box,
krg-color-picker,
krg-image-upload,
krg-password-box,
krg-check-box,
krg-phone-box,
krg-text-info-box,
krg-selection {
  display: grid;
  grid-template-columns: 180px auto;
  grid-template-rows: auto auto auto;
}
krg-text-box .lable,
krg-color-picker .lable,
krg-image-upload .lable,
krg-password-box .lable,
krg-check-box .lable,
krg-phone-box .lable,
krg-text-info-box .lable,
krg-selection .lable {
  grid-column: 1;
  grid-row: 1;
}
krg-text-box .input,
krg-color-picker .input,
krg-image-upload .input,
krg-password-box .input,
krg-check-box .input,
krg-phone-box .input,
krg-text-info-box .input,
krg-selection .input {
  grid-column: 2;
  grid-row: 1;
}
krg-text-box .status,
krg-color-picker .status,
krg-image-upload .status,
krg-password-box .status,
krg-check-box .status,
krg-phone-box .status,
krg-text-info-box .status,
krg-selection .status {
  grid-column: 2;
  grid-row: 2;
}
krg-text-box .details,
krg-color-picker .details,
krg-image-upload .details,
krg-password-box .details,
krg-check-box .details,
krg-phone-box .details,
krg-text-info-box .details,
krg-selection .details {
  grid-column: 1 / span 2;
  grid-row: 3;
}
krg-phone-box .input {
  display: grid;
  grid-template-columns: 120px auto;
  column-gap: 6px;
}
krg-phone-box .input select {
  grid-column: 1;
}
krg-phone-box .input input {
  grid-column: 2;
}
krg-text-area,
krg-text-box.in-column,
krg-color-picker.in-column,
krg-image-upload.in-column,
krg-password-box.in-column,
krg-check-box.in-column,
krg-phone-box.in-column,
krg-text-info-box.in-column {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto auto;
}
krg-text-area .lable,
krg-text-box.in-column .lable,
krg-color-picker.in-column .lable,
krg-image-upload.in-column .lable,
krg-password-box.in-column .lable,
krg-check-box.in-column .lable,
krg-phone-box.in-column .lable,
krg-text-info-box.in-column .lable {
  grid-row: 1;
  grid-column: 1;
}
krg-text-area .input,
krg-text-box.in-column .input,
krg-color-picker.in-column .input,
krg-image-upload.in-column .input,
krg-password-box.in-column .input,
krg-check-box.in-column .input,
krg-phone-box.in-column .input,
krg-text-info-box.in-column .input {
  grid-row: 2;
  grid-column: 1;
}
krg-text-area .status,
krg-text-box.in-column .status,
krg-color-picker.in-column .status,
krg-image-upload.in-column .status,
krg-password-box.in-column .status,
krg-check-box.in-column .status,
krg-phone-box.in-column .status,
krg-text-info-box.in-column .status {
  grid-row: 3;
  grid-column: 1;
}
krg-text-area .details,
krg-text-box.in-column .details,
krg-color-picker.in-column .details,
krg-image-upload.in-column .details,
krg-password-box.in-column .details,
krg-check-box.in-column .details,
krg-phone-box.in-column .details,
krg-text-info-box.in-column .details {
  grid-row: 4;
  grid-column: 1;
}
@media only screen and (max-width: 768px) {
  krg-text-box,
  krg-color-picker,
  krg-image-upload,
  krg-password-box,
  krg-phone-box,
  krg-text-info-box {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto;
  }
  krg-text-box .lable,
  krg-color-picker .lable,
  krg-image-upload .lable,
  krg-password-box .lable,
  krg-phone-box .lable,
  krg-text-info-box .lable {
    grid-row: 1;
    grid-column: 1;
  }
  krg-text-box .input,
  krg-color-picker .input,
  krg-image-upload .input,
  krg-password-box .input,
  krg-phone-box .input,
  krg-text-info-box .input {
    grid-row: 2;
    grid-column: 1;
  }
  krg-text-box .status,
  krg-color-picker .status,
  krg-image-upload .status,
  krg-password-box .status,
  krg-phone-box .status,
  krg-text-info-box .status {
    grid-row: 3;
    grid-column: 1;
  }
  krg-text-box .details,
  krg-color-picker .details,
  krg-image-upload .details,
  krg-password-box .details,
  krg-phone-box .details,
  krg-text-info-box .details {
    grid-row: 4;
    grid-column: 1;
  }
  krg-check-box {
    grid-template-columns: auto min-content;
  }
}
.krg.form-phonebox-wrapper .input {
  display: grid;
  grid-template-columns: 140px 4px auto;
}
.krg.form-phonebox-wrapper .input .nationcode {
  grid-column: 1;
}
.krg.form-phonebox-wrapper .input .phonenumber {
  grid-column: 3;
}
krg-list-selection-option {
  display: grid;
  grid-template-columns: 30px auto;
  width: auto;
  position: relative;
  border-color: #aab3bd;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  padding: 10px 0px;
}
krg-list-selection-option > .checkbox {
  grid-column: 1;
}
krg-list-selection-option > .checkbox > div {
  border-radius: 4px;
  border: 1px solid #5790db;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  margin: 2px 0px;
  width: 14px;
  height: 14px;
}
krg-list-selection-option > .checkbox.checked > div {
  background: #5790db;
}
krg-list-selection-option > .title {
  grid-column: 2;
}
krg-image-upload img {
  max-width: 100%;
  border-radius: 5px;
  margin: 10px 0px;
}
 .framemanager-transition-hide {
  opacity: 0;
  transform: translate(-10px, 0px);
  transition: all 0.1s;
}
.framemanager-transition-hidden {
  transform: translate(10px, 0px);
  opacity: 0;
}
.framemanager-transition-show {
  opacity: 1;
  transform: translate(0px, 0px);
  transition: all 0.1s;
}
 .krg.codeblock-wrapper {
  display: grid;
  overflow: hidden;
  box-shadow: 0px 0px 2px rgba(24, 11, 11, 0.4);
  grid-template-columns: 50px auto;
  border: #000 solid 0px;
  border-radius: 5px;
}
.krg.codeblock-wrapper .krg.codeblock-language {
  grid-column: 1;
  grid-row: 1;
  border-bottom: #000 solid 2px;
  padding: 6px;
  font-weight: bold;
  text-align: right;
}
.krg.codeblock-wrapper .krg.codeblock-language.js {
  background: yellow;
  color: #000;
}
.krg.codeblock-wrapper .krg.codeblock-language.html {
  background: red;
  color: #fff;
}
.krg.codeblock-wrapper .krg.codeblock-language.css {
  background: #3c1679;
  color: #fff;
}
.krg.codeblock-wrapper .krg.codeblock-header {
  grid-column: 2;
  grid-row: 1;
  padding: 6px;
  background: #eee;
  border-bottom: #000 solid 2px;
  font-style: italic;
}
.krg.codeblock-wrapper .krg.codeblock-linenumbers {
  grid-column: 1;
  grid-row: 2;
  padding: 8px 10px;
  color: #555;
  background: #eee;
  text-align: right;
  font-family: consolas;
  font-size: 14px;
}
.krg.codeblock-wrapper .krg.codeblock-code {
  grid-column: 2;
  grid-row: 2;
  min-width: 300px;
  padding: 8px 12px;
  overflow-x: scroll;
  background: #fff;
  color: #000;
  font-family: consolas;
  font-size: 14px;
}
 /* #########################
 * HEADERMENU
 * ######################### */
/* ========== COLOR ========== */
krg-tab-view > div.headermenu {
  width: 100%;
  overflow: auto;
  scroll-direction: horizontal;
  background: #fff0;
}
krg-tab-view > div.headermenu ul {
  white-space: nowrap;
  margin: 10 0 10 0;
  list-style-type: none;
  padding: 0px;
}
krg-tab-view > div.headermenu ul li {
  user-select: none;
  /* Standard */
  font-family: font-family-text;
  font-weight: 400;
  color: #4d75aa;
  padding: 4 10;
  margin: 0 4 0 4;
  white-space: nowrap;
  display: inline;
  border-radius: 5px;
}
krg-tab-view > div.headermenu ul li:hover {
  background-color: #fff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
krg-tab-view > div.headermenu ul li.active {
  background: #ddd;
}
krg-tab-view > krg-tab.visible {
  opacity: 1;
  transition: all 100ms;
}
krg-tab-view > krg-tab.visible.to-hidden {
  opacity: 0;
  transition: all 100ms;
}
krg-tab-view > krg-tab.hidden {
  opacity: 0;
  transition: all 100ms;
}
krg-tab-view > krg-tab.hidden.to-visible {
  opacity: 1;
  transition: all 100ms;
}
 .krg.leftsidebar {
  position: fixed;
  top: 0;
  left: -300;
  z-index: 500;
  overflow: hidden;
  width: 260px;
  height: 100%;
  background-color: #fff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  transition: 0.2s;
}
.krg.leftsidebar .optionhead {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  z-index: 100;
  background: linear-gradient(135deg, #2c1377 0%, #8d3b44 100%);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0);
}
.krg.leftsidebar .optionhead > img {
  position: absolute;
  margin: 24;
  height: 30px;
}
.krg.leftsidebar .optionhead > span {
  position: absolute;
  left: 80;
  top: 20;
  height: 100%;
  color: #fff;
  font-size: large;
  font-family: font-family-theme;
  font-size: x-large;
  vertical-align: middle;
  line-height: 40px;
}
.krg.leftsidebar .options {
  position: absolute;
  top: 140px;
  bottom: 20px;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  width: 300px;
  transition: 0.2s;
}
.krg.leftsidebar .options .form-section-title {
  margin-left: 20px;
}
.krg.leftsidebar .footer {
  padding: 2px 10px;
  font-size: small;
  color: #999;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  overflow-x: hidden;
  width: 300px;
}
.krg.leftsidebar.active {
  left: 0;
  transition: 0.2s;
}
.krg.leftsidebar.full {
  left: 0;
  right: 0;
  width: 100%;
  transition: 0.2s;
}
.krg.leftsidebar span.krg.section-title {
  padding-left: 20px;
  font-size: large;
}
 div.collabsiblebox {
  margin: 20px 0px;
  overflow: hidden;
}
div.collabsiblebox > .head {
  padding: 8px;
  display: grid;
  grid-template-columns: 40px auto;
}
div.collabsiblebox > .head > .menu {
  grid-column: 1;
}
div.collabsiblebox > .head > .menu > div {
  transition: all 0.2s;
  width: min-content;
  transform: rotate(90deg);
}
div.collabsiblebox > .head > .menu > div i {
  margin-right: 0px;
}
div.collabsiblebox > .head > .title {
  grid-column: 2;
}
div.collabsiblebox > .body {
  padding: 10px;
  max-height: 1000px;
  overflow: hidden;
}
div.collabsiblebox.closed > .body {
  padding: 0px 10px;
  max-height: 0px;
}
div.collabsiblebox {
  border-radius: 5px;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}
div.collabsiblebox > .head {
  background: #fff;
  border: solid 0px #000;
  border-width: 0px 0px 2px 0px;
}
div.collabsiblebox > .body {
  opacity: 1;
  transition: all 0.2s;
  background: #fafafa;
}
div.collabsiblebox.closed > .body {
  opacity: 0;
  transition: all 0.2s;
}
div.collabsiblebox.closed > .head > .menu > div {
  transform: rotate(0deg);
  transition: all 0.2s;
}
 .krg.screenshotgallery-wrapper {
  position: relative;
}
.krg.screenshotgallery-wrapper .side-cover-right {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f5f5f5);
  position: absolute;
  width: 30px;
  top: 0;
  bottom: 0;
  right: 0;
}
.krg.screenshotgallery-wrapper .side-cover-left {
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f5f5f5);
  position: absolute;
  width: 20px;
  top: 0;
  bottom: 0;
  left: 0;
}
.krg.screenshotgallery-wrapper > ul {
  list-style-type: none;
  white-space: nowrap;
  overflow-x: scroll;
  overscroll-behavior: auto;
}
.krg.screenshotgallery-wrapper > ul > li {
  display: inline-block;
  text-align: center;
  padding: 0;
  margin: 0px 14px;
}
.krg.screenshotgallery-wrapper > ul > li > img {
  user-select: none;
  width: 220px;
  height: auto;
  background: #aaa;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  pointer-events: none;
}
 krg-item-gallery {
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;
  padding: 10px;
  position: relative;
}
krg-item-gallery > .side-cover-right {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f5f5f5);
  position: fixed;
  width: 30px;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
}
krg-item-gallery > .side-cover-left {
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f5f5f5);
  position: fixed;
  width: 30px;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
}
krg-item-gallery::-webkit-scrollbar {
  display: none;
}
krg-item-gallery > * > div {
  margin-right: 16px;
}
 ul.krg.info-card-list {
  padding: 0;
}
ul.krg.info-card-list > li {
  margin-bottom: 10px;
}
ul.krg.info-card-list > li > .title {
  color: #333;
  font-size: x-large;
}
ul.krg.info-card-list > li > .date {
  color: #555;
  font-size: small;
  margin: 0px;
}
ul.krg.info-card-list > li > .text {
  color: #777;
  font-size: medium;
  margin: 8px 0px;
}
ul.krg.info-card-list > li > .details {
  color: #555;
  font-size: small;
}
 /* ========== FONT ========== */
/* ========== COLORS ========== */
/* ========== COLORS BG ========== */
/* ========== SHADOW ========== */
/* ========== TRANSITION ========== */
div.card,
li.card {
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
  padding: 10px;
}
li.card {
  list-style-type: none;
}
 a.krg.link {
  color: #4381f2;
  text-decoration: underline;
  cursor: pointer;
}
 button.krg-ui.default-button {
  border-radius: 8px;
  text-transform: uppercase;
  font-size: small;
  letter-spacing: 1px;
  font-weight: 900;
  width: auto;
  padding: 10px 18px;
  color: #fff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
  margin: 10px 10px 0px 0px;
}
button.krg-ui.default-button.big {
  padding: 18px 18px;
}
button.krg-ui.default-button.primary {
  background-color: #4381f2;
}
button.krg-ui.default-button.primary:hover {
  background-color: #3565be;
}
button.krg-ui.default-button.red {
  background-color: #eb6526;
}
button.krg-ui.default-button.red:hover {
  background-color: #bb4a15;
}
button.krg-ui.default-button.green {
  background-color: #1da359;
}
button.krg-ui.default-button.green:hover {
  background-color: #197740;
}
@media only screen and (max-width: 500px) {
  button.krg-ui.default-button.strech-on-mobile {
    width: 100%;
    margin: 10px 0px 0px 0px;
  }
  button.krg-ui.default-button.big-on-mobile {
    padding: 18px 18px;
  }
}
.krg-ui.button-array {
  width: 100%;
}
.krg-ui.button-array.right {
  text-align: right;
}
.krg-ui.button-array.right > :last-child {
  margin-right: 0px;
}
.krg-ui.button-array.left {
  text-align: left;
}
 button.krg-ui.section-button {
  border-radius: 8px 8px 0px 0px;
  text-transform: lowercase;
  font-size: smaller;
  letter-spacing: 1px;
  font-weight: 900;
  width: auto;
  padding: 8px 14px 6px 14px;
  color: #fff;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
button.krg-ui.section-button.primary {
  background-color: #4381f2;
}
button.krg-ui.section-button.primary:hover {
  background-color: #3565be;
}
 krg-progress-bar > div {
  height: 6px;
  overflow: hidden;
  background-color: #c9dcff;
}
krg-progress-bar > div > div {
  height: 100%;
  width: 50%;
  background-color: #4381f2;
  border-width: 0px 2px 0px 0px;
  border-style: solid;
  border-color: #fff;
}
krg-progress-bar > div.warn {
  background-color: #ffbdbd;
}
krg-progress-bar > div.warn div {
  background-color: red;
}